<template>
  <div class="home">
    <!--1.  顶部区域布局---------- -->
    <div class="header">
      <div class="item">
        总销售额
        <div class='num'>{{ homeInfo.saleTotal }}</div>
        <div class="bottom">今日销售额：{{ homeInfo.sale }}</div>
      </div>
      <div class="item">访问量
        <div class='num'>{{ homeInfo.viewsTotal }}</div>
        <div class="bottom">今日访问量：{{ homeInfo.views }}</div>
      </div>
      <div class="item">访问量
        <div class='num'>{{ homeInfo.collectTotal }}</div>
        <div class="bottom">今日销售额：{{ homeInfo.collect }}</div>
      </div>
      <div class="item">支付量
        <div class='num'>{{ homeInfo.payTotal }}</div>
        <div class="bottom">今日支付量：{{ homeInfo.pay }}</div>
      </div>
    </div>

    <!--2. 访问数据统计 ----------------->
    <div class="content">
      <div class="time-info border" id='box13'>
        <div class="title">月销售额</div>
        <div id="charts" style="width: 100%; height: 300px"></div>
      </div>
      <div class="area border" id="box1">比例分配
        <div id="main" style="width: 100%; height: 300px"></div>
      </div>
    </div>


    <!-- 3.  -->
    <!-- 最新内容 -->
    <div class="home-footer">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>今日订单</span>
          </div>
        </template>
        <div class="text item">
          <el-row>
            <el-col :span="8" class="center">
              <div class="font">今日订单数</div>
              <div>{{orderInfo.curCollect}}</div>
            </el-col>
            <el-col :span="8" class="center">
              <div class="font">汇总确认订单</div>
              <div>{{orderInfo.curOrderCount}}</div>
            </el-col>
            <el-col :span="8"  class="center">
              <div class="font">累计金额</div>
              <div>{{orderInfo.curMoney}}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>本月订单</span>
          </div>
        </template>
        <div class="text item">
          <el-row>
            <el-col :span="8" class="center">
              <div class="font">今日订单数</div>
              <div>{{orderInfo.collect}}</div>
            </el-col>
            <el-col :span="8" class="center">
              <div class="font">汇总确认订单</div>
              <div>{{orderInfo.orderCount}}</div>
            </el-col>
            <el-col :span="8" class="center">
              <div class="font">累计金额</div>
              <div>{{orderInfo.money}}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>快捷入口</span>
          </div>
        </template>
        <div class="text item" style="text-align:center">
          <el-button type="primary">产品管理</el-button>
          <el-button>消息管理</el-button>
          <el-button>内容管理</el-button>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import api from '@/api/index'
import { onMounted, reactive, ref, toRef, getCurrentInstance, inject } from 'vue';
export default {
  setup() {
    // 定义统计数据变量-对象
    let homeInfo = reactive({ data: {} })
    // 订单信息
    const orderInfo=ref({})

    // 获取数据
    // const instance = getCurrentInstance()
    // // console.log(instance);
    // const echarts = instance.appContext.config.globalProperties.$echarts

    // 获取echarts
    const $echarts = inject('echarts')
    // 绘制柱状图
    const bar = (xData, yData, yBarData) => {
      // 检测是否已经存在echarts实例
      let myChart = $echarts.getInstanceByDom(
        document.getElementById('charts')
      );
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();
      }
      // 基于准备好的dom，初始化echarts实例
      myChart = $echarts.init(document.getElementById('charts'))
      // 指定图表的配置项和数据
      let option = {
        
        tooltip: {},
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            name: '销售额',
            type: 'line',
            data: yData,
            smooth: true,
            color: ['#65E668'],
          },
          {
            name: '销售量',
            type: 'bar',
            data: yBarData,
            color:['#F07069']
          }

        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }


    // 绘制饼图
    const pie = (data) => {
      let myChart = $echarts.getInstanceByDom(
        document.getElementById('main')
      )
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();
      }
      // 基于准备好的dom，初始化echarts实例
      myChart = $echarts.init(document.getElementById('main'));
      var option;
      option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option)
    }

    // const homeInfo=ref({})
    //  请求数据 -- 生命周期函数---
    // 首页统计信息数据
    api.getHomeCount().then(res => {
      // homeInfo=res.data.data.list
      // 合并对象
      // 1.响应式
      // Object.assign(homeInfo,res.data.data.list)
      // 2.响应式
      let data = res.data.data.list
      homeInfo.data = data
      // 3.响应式数据
      // homeInfo.value=data
      // console.log(homeInfo);
    })
    // 首页图表数据----
    api.getHomeFormat().then(res => {
      let arr = res.data.result.data.sale_money
      // console.log(arr);
      let xData = [], yData = [], yBarData = [], pieData = []
      arr.forEach(ele => {
        xData.push(ele.name)
        yData.push(ele.total_amount)
        yBarData.push(ele.num)
        let obj = {}
        obj.name = ele.name
        obj.value = ele.total_amount
        pieData.push(obj)
      });
      bar(xData, yData, yBarData)
       pie(pieData)
    })
    api.getHomeOrder().then(res=>{
      orderInfo.value=res.data.list
      // console.log(orderInfo);
    })

    return {
      homeInfo: toRef(homeInfo, 'data'),
      orderInfo
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  margin: 10px;
}

.header {
  display: flex;
  padding-right: 30px;

  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    // text-align: center;
    position: relative;

    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
    }

    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }

  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }

  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }

  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }

  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}

// 图表
.border {
  border: 1px solid #eee;
  background: #eee;
}

.content {
  margin: 20px;
  display: flex;
  height: 320px;

  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }

  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}

//内容
.home-footer {
  display: flex;
  padding-left: 20px;
  margin-bottom: 20px;

  .box-card {
    flex: 1;
    margin-right: 30px;
   .center{
    text-align: center;
    .font{
      font-size: 12px;
      margin-bottom: 10px;
    }
   }
   .center:nth-child(2){
      border-right:1px solid #e4e7ed;
      border-left:1px solid #e4e7ed;
    }
    span {
      font-weight: 600;
    }
  }
}
</style>
